import React, { type FC } from 'react'
import { withNativeProps } from '../../../src/utils/native-props'
import { px2vw, type ComponentProps } from '../../global/common-style'

const classPrefix = `gd-loading`

export type LoadingProps = {
  size?: number
} & ComponentProps<'--gd-loading-color'>

export const Loading: FC<LoadingProps> = (props) => {
  const { size = 50 } = props

  const boxStyle = {
    width: px2vw(size),
    height: px2vw(size),
    borderRadius: px2vw(size / 10),
  }

  return withNativeProps(
    props,
    <div className={`${classPrefix}-loader`}>
      <div className={`${classPrefix}-box`} style={boxStyle} />
      <div
        className={`${classPrefix}-shadow`}
        style={{
          width: px2vw(size),
          height: px2vw(size / 10),
          top: px2vw(size + (size / 10) * 2),
        }}
      />
    </div>
  )
}
